<template>

  <div id="order">
    <link
      type="text/css"
      rel="stylesheet"
      href="//misc.360buyimg.com/??jdf/1.0.0/unit/ui-base/5.0.0/ui-base.css,jdf/1.0.0/unit/shortcut/5.0.0/shortcut.css,jdf/1.0.0/unit/global-header/1.0.0/global-header.css,jdf/1.0.0/unit/myjd/5.0.0/myjd.css,jdf/1.0.0/unit/nav/2.0.0/nav.css,jdf/1.0.0/unit/shoppingcart/2.0.0/shoppingcart.css,jdf/1.0.0/unit/global-footer/5.0.0/global-footer.css,jdf/1.0.0/unit/service/5.0.0/service.css,user/myjd/lib/1.0.0/widget/global/global.css"
    >
    <link
      type="text/css"
      rel="stylesheet"
      href="//misc.360buyimg.com/user/myjd/ordercenter/??css/myjd.order.css,widget/top-search/top-search.css,widget/order-table-list/order-table-list.css,widget/ui-page/ui-page.css,widget/order-goods-list/order-goods-list.css,widget/ui-slidebar/ui-slidebar.css,widget/common/common.css"
      source="combo"
    >

    <div class="mc">

      <div class="top-search hide">
        <div class="dl">
          <span class="label">订单类型：</span>
        </div>
        <div class="dl">
          <a
            href="#none"
            clstag="click|keycount|orderlist|fanhui"
            class="btn-9"
          >返回</a>
        </div>
        <a
          href="#none"
          clstag="click|keycount|orderlist|closehighserach"
          class="ts-del"
        />
      </div>

      <table class="td-void order-tb">
        <colgroup>
          <col class="number-col">
          <col class="consignee-col">
          <col class="amount-col">
          <col class="status-col">
          <col class="operate-col">
        </colgroup>
        <thead>
          <tr>
            <th>
              <div class="ordertime-cont">
                <div class="time-txt">
                  近三个月订单<b /><span class="blank" />
                </div>
              </div>
              <div class="order-detail-txt ac">订单详情</div>
            </th>
            <th>收货人</th>
            <th>金额</th>
            <th>
              <div id="orderState" class="deal-state-cont">
                <div class="state-txt">
                  全部状态<b /><span class="blank" />
                </div>
              </div>
            </th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-for="item in orderList" id="tb-108699775767" :key="item.id">
          <tr class="sep-row">
            <td colspan="5" />
          </tr>

          <tr class="tr-th">
            <td colspan="5"><span class="gap" />
              <span
                class="dealtime"
                title="2020-01-11 18:21:55"
              >{{ item.create }}</span>
              <input
                id="datasubmit-108699775767"
                type="hidden"
                value="2020-01-11 18:21:55"
              > <span class="number">
                订单号： <a
                  id="idUrl108699775767"
                  name="orderIdLinks"
                  target="_blank"
                  href="#"
                  clstag="click|keycount|orderinfo|order_num"
                >{{ item.id }}</a>
              </span>

            </td>
          </tr>

          <tr id="track108699775767" class="tr-bd" oty="0,4,70" cxl="0">
            <td>
              <div class="goods-item p-3650344">
                <div class="p-img">
                  <a
                    href="#"
                    clstag="click|keycount|orderinfo|order_product"
                    target="_blank"
                  > <img
                    class=""
                    :src="item.productImg"
                    title=""
                    data-lazy-img="done"
                    width="60"
                    height="60"
                  >
                  </a>
                </div>
                <div class="p-msg">
                  <div class="p-name">
                    <a
                      href="#"
                      class="a-link"
                      clstag="click|keycount|orderinfo|order_product"
                      target="_blank"
                      title=""
                    >{{ item.productName }}</a>
                  </div>
                  <div class="p-extra">
                    <ul class="o-info">
                      <li><span class="o-match J-o-match" data-sku="3650344"><i /><em>找搭配</em></span></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="goods-number">x1</div>

              <div class="goods-repair">
                <a
                  href="#"
                  target="_blank"
                  clstag="click|keycount|orderinfo|order_repair"
                > 申请售后 </a>
              </div>
              <div class="clr" />
            </td>

            <td rowspan="1">
              <div class="consignee tooltip">
                <span class="txt">{{ item.customerName }}</span><b />
                <div class="prompt-01 prompt-02" style="display: none;">
                  <div class="pc">
                    <strong>{{ item.customerName }}</strong>
                    <p>{{ item.customerAddress }}</p>
                    <p>{{ item.customerPhone }}</p>
                  </div>
                  <div class="p-arrow p-arrow-left" />
                </div>
              </div>
            </td>
            <td rowspan="1">
              <div class="amount">
                <span>总额 ¥{{ item.orderPrice }}</span> <br> <span class="ftx-13">{{ item.paymentMethod }}</span>
              </div>
            </td>
            <td rowspan="1">
              <div class="status">
                <span class="order-status ftx-03"> 已完成 </span><br>
                <a
                  target="_blank"
                  href="//vip.jd.com/myJingbean.html"
                  class="ftx-01 bean-tips"
                  data-tips="<div class='bean-tips-cont'>已返<span class='ftx-01'>7</span>京豆</div>"
                ><i
                  class="bean-icon"
                />+7</a> <br>
                <a
                  clstag="click|keycount|orderlist|dingdanxiangqing"
                  target="_blank"
                  @click.prevent="handleOrderDetails(item.id)"
                >订单详情</a>
              </div>
            </td>
            <td id="operate108699775767" rowspan="1">
              <div class="operate">

                <div id="pay-button-108699775767" _baina="0" />

                <a
                  class=""
                  target="_blank"
                  href="#"
                  clstag="click|keycount|orderinfo|invoice_show"
                >查看发票</a><br>
                <a
                  class=""
                  target="_blank"
                  href="#"
                  clstag="click|keycount|orderinfo|product_comment"
                >评价</a>|<a
                  class=""
                  clstag="click|keycount|orderinfo|product_show"
                  href="#"
                  target="_blank"
                >晒单</a><br>
                <a
                  href="#"
                  class="btn-again btn-again-show"
                  target="_blank"
                  clstag="click|keycount|orderlist|buy"
                ><b /> 立即购买 </a><br>

              </div>
            </td>
          </tr>

        </tbody>

      </table>

    </div>
    <el-dialog width="80%" :visible.sync="detailsVisiable">
      <OrderDetails :order-id="orderId" :order="order" />
    </el-dialog>
  </div>

</template>

<script>
import { queryOrder, queryOrderDetails } from '../../api/order'
import OrderDetails from '@/views/order/orderDetails'
export default {
  name: 'Index',
  components: {
    OrderDetails
  },
  data() {
    return {
      detailsVisiable: false,
      orderId: '',
      orderList: [],
      order: {

      }
    }
  },
  mounted() {
    this.queryOrder()
  },
  methods: {
    handleOrderDetails(val) {
      this.detailsVisiable = true
      this.orderId = val
      queryOrderDetails({ orderId: this.orderId }).then(response => {
        this.order = response.message
        console.log(this.order)
      })
    },
    queryOrder() {
      queryOrder().then(response => {
        console.log(response)
        this.orderList = response.message
      })
    }
  }
}
</script>

<style scoped>

</style>
